<template>
  <div>
    <!-- 搜索框1: 用于查询第二层节点 -->
    <el-input
      v-model="searchQuerySecondLevel"
      placeholder="请输入第二层节点的关键词进行搜索"
      suffix-icon="el-icon-search"
      clearable
    ></el-input>

    <!-- 搜索框2: 用于查询第三层节点 -->
    <el-input
      v-model="searchQueryThirdLevel"
      placeholder="请输入第三层节点的关键词进行搜索"
      suffix-icon="el-icon-search"
      clearable
    ></el-input>

    <!-- 搜索按钮 -->
    <el-button @click="searchNodes">搜索</el-button>

    <!-- 树状结构 -->
    <el-tree
      :data="filteredTreeData"
      :props="defaultProps"
      show-checkbox
      node-key="id"
      accordion
      :default-expand-all="true"
    ></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 树的数据
      treeData: [
        {
          id: 1,
          label: "Root Node 1",
          children: [
            {
              id: 2,
              label: "Child Node 1-1",
              children: [
                { id: 3, label: "Leaf Node 1-1-1" },
                { id: 4, label: "Leaf Node 1-1-2" },
              ],
            },
            {
              id: 5,
              label: "Child Node 1-2",
              children: [
                { id: 6, label: "Leaf Node 1-2-1" },
                { id: 7, label: "Leaf Node 1-2-2" },
              ],
            },
          ],
        },
        {
          id: 8,
          label: "Root Node 2",
          children: [
            {
              id: 9,
              label: "Child Node 2-1",
              children: [
                { id: 10, label: "Leaf Node 2-1-1" },
                { id: 11, label: "Leaf Node 2-1-2" },
              ],
            },
          ],
        },
      ],
      // 搜索框的查询关键词
      searchQuerySecondLevel: "",
      searchQueryThirdLevel: "",
      filteredTreeData: [], // 存储过滤后的树数据
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {
    this.filteredTreeData = this.treeData;
  },
  methods: {
    // 搜索节点：根据第二层和第三层的搜索框决定查询范围
    searchNodes() {
      if (!this.searchQuerySecondLevel && !this.searchQueryThirdLevel) {
        // 如果两个搜索框都没有输入，显示原始数据
        this.filteredTreeData = this.treeData;
      } else {
        // 判断搜索框内容
        if (this.searchQuerySecondLevel && this.searchQueryThirdLevel) {
          // 如果两个搜索框都有值，先过滤第二层，再过滤第三层
          this.searchSecondLevelNodes();
          this.searchThirdLevelNodes();
        } else if (this.searchQuerySecondLevel) {
          // 如果只有第二层搜索框有值，进行第二层搜索
          this.searchSecondLevelNodes();
        } else if (this.searchQueryThirdLevel) {
          // 如果只有第三层搜索框有值，进行第三层搜索
          this.searchThirdLevelNodes();
        }
      }
    },

    // 查询第二层节点
    searchSecondLevelNodes() {
      const result = this.treeData
        .map((rootNode) => {
          // 过滤第二层节点
          const filteredChildren = this.filterSecondLevel(rootNode.children);

          // 如果有符合条件的第二层节点，则返回该父节点及其匹配的第二层节点
          if (filteredChildren.length > 0) {
            return {
              ...rootNode,
              children: filteredChildren,
            };
          } else {
            return null; // 没有符合条件的子节点时返回 null，过滤掉这个根节点
          }
        })
        .filter((item) => item !== null); // 过滤掉没有匹配的根节点

      this.filteredTreeData = result;
    },

    // 查询第三层节点
    searchThirdLevelNodes() {
      const result = this.treeData
        .map((rootNode) => {
          // 过滤第二层和第三层节点
          const filteredChildren = this.filterThirdLevel(rootNode.children);

          // 如果有符合条件的第三层节点，则返回该父节点及其匹配的第三层节点
          if (filteredChildren.length > 0) {
            return {
              ...rootNode,
              children: filteredChildren,
            };
          } else {
            return null; // 没有符合条件的子节点时返回 null，过滤掉这个根节点
          }
        })
        .filter((item) => item !== null); // 过滤掉没有匹配的根节点

      this.filteredTreeData = result;
    },

    // 过滤第二层节点
    filterSecondLevel(children) {
      return children
        .map((childNode) => {
          // 查找第二层节点
          if (
            childNode.label
              .toLowerCase()
              .includes(this.searchQuerySecondLevel.toLowerCase())
          ) {
            return childNode; // 返回符合条件的节点
          } else {
            return null; // 不符合条件，返回 null
          }
        })
        .filter((item) => item !== null); // 过滤掉没有匹配的节点
    },

    // 过滤第三层节点
    filterThirdLevel(children) {
      return children
        .map((childNode) => {
          // 查找第三层节点
          if (childNode.children) {
            const filteredThirdLevel = childNode.children.filter((thirdNode) =>
              thirdNode.label
                .toLowerCase()
                .includes(this.searchQueryThirdLevel.toLowerCase())
            );

            // 如果第三层节点匹配，保留这个父节点及其匹配的子节点
            if (filteredThirdLevel.length > 0) {
              return {
                ...childNode,
                children: filteredThirdLevel, // 保留第三层匹配的子节点
              };
            } else {
              return null; // 如果第三层没有匹配，返回 null
            }
          }
          return null;
        })
        .filter((item) => item !== null); // 过滤掉没有匹配的节点
    },
  },
};
</script>

<style scoped>
/* Optional: Custom styles */
</style>